<div class="row">
    <div class="col-xs-12">
        <div class="box">
            <div class="box-header">
                <h3 class="box-title">教师信息管理</h3>
                <div class="box-tools">
                    <div class="input-group input-group-sm" style="width: 350px;">
                        <input type="text" name="table_search" id="searchNameId"
                               class="form-control pull-right" placeholder="用户名">

                        <div class="input-group-btn">
                            <button type="button" class="btn btn-default btn-search">
                                <i class="fa fa-search"></i>
                            </button>
                            <button type="button" class="btn btn-primary btn-lg" data-toggle="modal"
                                    data-target="#myModal">
                                添加
                            </button>
                            <button type="button" class="btn btn-default btn-delete">删除</button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /.box-header -->
            <div class="box-body table-responsive no-padding">
                <table class="table table-hover">
                    <thead>
                    <tr>
                        <th><input type="checkbox" id="checkAll">全选</th>
                        <th>姓名</th>
                        <th>政治面貌</th>
                        <th>民族</th>
                        <th>身份证</th>
                        <th>性别</th>
                        <th>出生日期</th>
                        <th>手机</th>
                        <th>家庭住址</th>
                        <th>工号</th>
                    </tr>
                    </thead>
                    <tbody id="tbodyId">
                    <tr>
                        <td colspan="7">数据正在加载中...</td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div id="pageId" class="box-footer clearfix" dm="100">

            </div>
            <!-- /.box-body -->
        </div>
        <!-- /.box -->
    </div>
    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">教师录入</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" method="post" id="formId">
                        <div class="form-group">
                            <label for="name" class="col-sm-2 control-label">姓名</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="name" name="name" style="width: 55%;"
                                       placeholder="请输入">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="political" class="col-sm-2 control-label">政治面貌</label>
                            <div class="col-sm-10">
                                <select class="form-control" id="political" name="political" style="width: 55%;">
                                    <option value="中共党员">中共党员</option>
                                    <option value="中共预备党员">中共预备党员</option>
                                    <option value="共青团员">共青团员</option>
                                    <option value="民革党员">民革党员</option>
                                    <option value="民盟盟员">民盟盟员</option>
                                    <option value="民建会员">民建会员</option>
                                    <option value="民进会员">民进会员</option>
                                    <option value="农工党党员">农工党党员</option>
                                    <option value="致公党党员">致公党党员</option>
                                    <option value="九三学社社员">九三学社社员</option>
                                    <option value="台盟盟员">台盟盟员</option>
                                    <option value="无党派人士">无党派人士</option>
                                    <option selected value="群众">群众</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="nation" class="col-sm-2 control-label">民族</label>
                            <div class="col-sm-10">
                                <select class="form-control" id="nation" name="nation" style="width: 55%;">
                                    <option value="汉族">汉族</option>
                                    <option value="蒙古族">蒙古族</option>
                                    <option value="回族">回族</option>
                                    <option value="藏族">藏族</option>
                                    <option value="维吾尔族">维吾尔族</option>
                                    <option value="苗族">苗族</option>
                                    <option value="彝族">彝族</option>
                                    <option value="壮族">壮族</option>
                                    <option value="布依族">布依族</option>
                                    <option value="朝鲜族">朝鲜族</option>
                                    <option value="满族">满族</option>
                                    <option value="侗族">侗族</option>
                                    <option value="瑶族">瑶族</option>
                                    <option value="僳僳族">僳僳族</option>
                                    <option value="佤族">佤族</option>
                                    <option value="畲族">畲族</option>
                                    <option value="高山族">高山族</option>
                                    <option value="拉祜族">拉祜族</option>
                                    <option value="水族">水族</option>
                                    <option value="东乡族">东乡族</option>
                                    <option value="纳西族">纳西族</option>
                                    <option value="景颇族">景颇族</option>
                                    <option value="柯尔克孜族">柯尔克孜族</option>
                                    <option value="土族">土族</option>
                                    <option value="达斡尔族">达斡尔族</option>
                                    <option value="仫佬族">仫佬族</option>
                                    <option value="羌族">羌族</option>
                                    <option value="布朗族">布朗族</option>
                                    <option value="撒拉族">撒拉族</option>
                                    <option value="毛南族">毛南族</option>
                                    <option value="仡佬族">仡佬族</option>
                                    <option value="锡伯族">锡伯族</option>
                                    <option value="阿昌族">阿昌族</option>
                                    <option value="普米族">普米族</option>
                                    <option value="塔吉克族">塔吉克族</option>
                                    <option value="怒族">怒族</option>
                                    <option value="乌孜别克族">乌孜别克族</option>
                                    <option value="俄罗斯族">俄罗斯族</option>
                                    <option value="鄂温克族">鄂温克族</option>
                                    <option value="德昂族">德昂族</option>
                                    <option value="保安族">保安族</option>
                                    <option value="裕固族">裕固族</option>
                                    <option value="京族">京族</option>
                                    <option value="塔塔尔族">塔塔尔族</option>
                                    <option value="独龙族">独龙族</option>
                                    <option value="鄂伦春族">鄂伦春族</option>
                                    <option value="赫哲族">赫哲族</option>
                                    <option value="门巴族">门巴族</option>
                                    <option value="珞巴族">珞巴族</option>
                                    <option value="基诺族">基诺族</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="roleId" class="col-sm-2 control-label">身份证</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="roleId" name="roleId" placeholder="请输入"
                                       style="width: 55%;" onfocus="doClearText()" onblur="doCheckRoleId()">
                                <span id="doCheckRoleIdText" style="color: red;"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">性别</label>
                            <div class="col-sm-10" style="width: 55%">
                                <label class="radio-inline">
                                    <input type="radio" name="gender" value="男"> 男
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="gender" value="女"> 女
                                </label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="birth" class="col-sm-2 control-label">出生日期</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="birth" name="birth" style="width: 55%">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="phone" class="col-sm-2 control-label">手机</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="phone" name="phone" placeholder="请输入"
                                       style="width: 55%;" onfocus="doClearPhoneText()" onblur="doCheckPhone()">
                                <span id="doCheckPhoneText" style="color: red;"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="address" class="col-sm-2 control-label">家庭住址</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="address" name="address" placeholder="请输入"
                                       style="width: 55%;">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary commit-form">确定</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">

    function doClearPhoneText() {
        $("#doCheckPhoneText").text("");
}


//doCheckPhoneText
    function doCheckPhone() {
        let phoneVal = $("input[name='phone']").val();
        let _phone = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/;
        if (!(_phone.test(phoneVal))) {
            $("#doCheckPhoneText").text("添加手机号码有误");
        }
}

function doClearText() {
        $("#doCheckRoleIdText").text("");
    }

    function doCheckRoleId() {
        let idVal = $("input[name='roleId']").val();
        let _IDRe18 = /^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
        if (_IDRe18.test(idVal)) {
            $("input[name='gender'][value='"+getSex(idVal)+"']").prop("checked",true);
            $("input[name='birth']").val(getBirth(idVal));
        } else {
            $("#doCheckRoleIdText").text("添加身份证信息有误");
        }
    }


    function getSex(idCard) {
        let sexStr = '';
        if (parseInt(idCard.slice(-2, -1)) % 2 === 1) {
            sexStr = '男';
        } else {
            sexStr = '女';
        }
        return sexStr;
    }
    function getBirth(idCard) {
        let birthday = '';
        if (idCard != null && idCard !== '') {
            if (idCard.length === 15) {
                birthday = '19' + idCard.slice(6, 12);
            } else if (idCard.length === 18) {
                birthday = idCard.slice(6, 14);
            }
            birthday = birthday.replace(/(.{4})(.{2})/, '$1/$2/');
            //通过正则表达式来指定输出格式为:1990-01-01
        }
        return birthday;
    }

    $(function () {
        $("#pageId").load("doPageUI", function () {
            doGetObjects();//异步加载用户行为日志信息
        });
        //$(".input-group-btn .btn-search").on("click",doQueryObjects);
        //$(".input-group-btn .btn-delete").on("click",doDeleteObjects);
        $(".input-group-btn")
            .on("click", ".btn-search", doQueryObjects)
            .on("click", ".btn-delete", doDeleteObjects)
        $(".modal-content").on("click", ".commit-form", doCommitForm)
        //全选按钮事件注册
        $("#checkAll").change(doChangeTbodyCheckBoxState);
        //tbody中checkbox对象事件注册
        $("#tbodyId").on("change", "input:checkbox", doChangeTheadCheckBoxState);
    });

    function doCommitForm() {
        //关闭模态框
        $('#myModal').modal('hide');
        let url = "teacher/addTeacherMessage";
        let params = {
            "name": $("input[name='name']").val(),
            "political": $("#political").find("option:selected").val(),
            "nation": $("#nation").find("option:selected").val(),
            "roleId": $("input[name='roleId']").val(),
            "gender": $("input[name='gender']").val(),
            "birth": $("input[name='birth']").val(),
            "phone": $("input[name='phone']").val(),
            "entryTime": $("input[name='entryTime']").val(),
            "address": $("input[name='address']").val()
        };
        //3.3基于ajax技术发送请求
        $.post(url, params, function (result) {
            if (result.state === 1) {
                alert(result.message);
                doRefreshAfterDeleteOK();
            } else {
                alert(result.message);
            }
        })
    }

    //修改thead中checkbox对象状态
    function doChangeTheadCheckBoxState() {
        //1.获取所有tbody中checkbox对象的状态,并进行逻辑与操作
        let flag = true;//初始值不能等于false
        $("#tbodyId input:checkbox")
            .each(function () {
                flag = flag && $(this).prop("checked");
            })
        //2.修改thead中checkbox对象状态
        $("#checkAll").prop("checked", flag);
    }

    //修改tbody中checkbox对象状态
    function doChangeTbodyCheckBoxState() {
        //1.获取thead中checkbox对象状态
        //这里的$(this)指向的对象为thead中的checkbox对象
        var flag = $(this).prop("checked");
        //2.修改tbody中checkbox对象状态
        $("#tbodyId input:checkbox").prop("checked", flag);
    }

    //获取选中checkbox对象中value属性的值并存储到数组
    function doGetCheckedIds() {
        //1.定义数组,用于存储选中的记录id
        var array = [];//new Array();
        //2.获取所有checkbox对象,并进行迭代,获取value属性值,然后存储到数组.
        $("#tbodyId input:checkbox")//获取tbodyId对应的元素中类型为checkbox的input对象
            .each(function () {//迭代所有类型为checkbox的input对象
                if ($(this).prop("checked")) {//获取checkbox对象的checked属性并校验
                    array.push($(this).val());//将选中的记录的value属性值存储到数组
                }
            });
        //3.返回存储了记录id值的数组对象
        return array;
    }

    //执行客户端删除按钮的事件
    function doDeleteObjects() {
        //debugger
        //1.获取页面上选中的checkbox的值(这里设置的是记录id值)
        var idArray = doGetCheckedIds();
        if (idArray.length === 0) {
            alert("请先选择");
            return;
        }
        //2.给出提示信息(您确定删除吗)
        if (!confirm("确认删除吗")) return;
        //3.发送异步请求执行删除业务
        //3.1定义url
        var url = "teacher/doDeleteObjects";
        //3.2定义参数
        var params = {"ids": idArray.toString()};//[1,2,3].toString()=="1,2,3"
        //3.3基于ajax技术发送请求
        $.post(url, params, function (result) {
            if (result.state === 1) {
                alert(result.message);
                doRefreshAfterDeleteOK();
            } else {
                alert(result.message);
            }
        })
    }

    //删除以后的刷新操作:要么继续查询当前页数据,要么查询上一页数据(最后一页)
    function doRefreshAfterDeleteOK() {
        //1.获得当前页码值,总页数,全选状态
        var pageCurrent = $("#pageId").data("pageCurrent");
        var pageCount = $("#pageId").data("pageCount");
        var allChecked = $("#checkAll").prop("checked");
        //2.基于当前页码值以及全选状态修改当前页码值
        if (pageCurrent === pageCount && allChecked && pageCurrent > 1) {
            pageCurrent--;
            $("#pageId").data("pageCurrent", pageCurrent);
        }
        //3.重新执行查询
        doGetObjects();
    }

    //基于查询按钮事件,执行日志信息的查询操作
    function doQueryObjects() {
        //1.初始化当前页码值
        $("#pageId").data("pageCurrent", 1);
        //2.执行查询操作
        doGetObjects();
    }

    //启动ajax异步操作,查询用户行为日志信息
    function doGetObjects() {
        //设置thead中checkbox对象的初始状态
        $("#checkAll").prop("checked", false);
        //1.定义请求参数
        var pageCurrent = $("#pageId").data("pageCurrent");
        //debugger
        //在js中非0数字,非undefined,非空串默认用在boolean表达式中都认为是true.
        if (!pageCurrent) pageCurrent = 1;//当pageCurrent没有值时给一个默认值
        //var params="pageCurrent="+pageCurrent;//普通的字符串连接
        //var params=`pageCurrent=${pageCurrent}`;//模板字符串(``反引号引起来)

        var params = {"pageCurrent": pageCurrent};//JS对象(JSON格式)
        //获取页面上用户表单数据,可以基于此表单数据进行查询
        var uname = $("#searchNameId").val();
        if (uname) params.username = uname;

        //2.定义请求url
        var url = "teacher/doFindAllMessage";
        //3.发送异步请求执行查询,并处理结果
        //$.getJSON(url,params,function(result){
        //	doHandleQueryResponseResult(result);
        //});
        //简化写法
        $.getJSON(url, params, doHandleQueryResponseResult);
    }

    //处理查询操作返回的结果
    function doHandleQueryResponseResult(result) {//JsonResult
        if (result.state === 1) {//正常信息
            //1.呈现当前页的用户行为日志记录
            doSetTableBodyRows(result.data.records);
            //2.呈现当前的分页信息(总记录数,总页数,当前页,...)
            doSetPagination(result.data);//reault.data为服务端业务层返回给控制层的pageObject
        } else {//异常信息
            //alert(result.message);//后续可能修改呈现异常信息的方式
            doHandleQueryResponseError(result.message);
        }
    }

    //处理日志查询时服务端响应的错误信息
    function doHandleQueryResponseError(message) {
        //设置tbody中的内容信息
        $("#tbodyId").html(`<tr><td colspan='7'>${message}</td></tr>`);
        //重新初始化分页信息
        doSetPagination({"rowCount": 0, "pageCount": 0, "pageCurrent": 1});
    }

    //将用户行为日志记录呈现在table的tbody位置
    function doSetTableBodyRows(records) {
        //1.获取tbody对象,并清空内容
        var tBody = $("#tbodyId");
        tBody.empty();//清空tbody中内容
        //2.在tbody中追加日志记录(基于数组的forEach函数迭代数组,=>为一个箭头运算符,左边为数组中的一个元素,右边为对这个元素的操作)
        records.forEach(item => tBody.append(doCreateRow(item)));
    }

    //基于数据创建当前行对象
    function doCreateRow(item) {
        return "<tr><td><input type='checkbox' name='cBox' value='" + item.teaId + "' ></td>" +
            "<td>" + item.name + "</td>" +
            "<td>" + item.political + "</td>" +
            "<td>" + item.nation + "</td>" +
            "<td>" + item.roleId + "</td>" +
            "<td>" + item.gender + "</td>" +
            "<td>" + new Date(item.birth).toLocaleString() + "</td>" +
            "<td>" + item.phone + "</td>" +
            "<td>" + item.address + "</td>" +
            "<td>" + item.number + "</td></tr>";
    }

</script>






